import React, { Component } from "react";
import "./StaffSelect.scss";
import axios from "axios";
import List from "./List";
import Header from "../../view/Login/Header/Header"
export default class NewProducts extends Component {
  state = {
    topList: [],
    bottomList: [],
  };

  componentDidMount() {
    axios
      .get(
        "item/list.json?__timestamp=1598428780368&categoryId=11&subCategoryId=9999954658778&categoryType=0"
      )
      .then((res) => {
        console.log(res.data.data);
        this.setState({
          topList: res.data.data.categoryL2List,
          bottomList: res.data.data.categoryItems.itemList,
        });
      });
  }

  render() {
    if (this.state.topList.length) {
      console.log(this.state.bottomList);
      const { bottomList } = this.state;
      return (
        <div className="StaffList_content" >
            <Header></Header>
            <ul className="StaffList_content_list">
          {this.state.topList &&
            this.state.topList.map((v, i) => (
              <li
                 className={
                    this.state.id === v.id ? "StaffList_content_item_StaffListActive" : "StaffList_content_item"
                  }
                key={v.id}
                onClick={() => {
                    this.setState({
                       id:v.id
                    })
                  /* this.props.history.push()
                                    axios.get().then(res => {
                                        this.setState({
                                            topList:res.data.data.categoryL2List,
                                        })
                                    }) */
                }}
              >
                {v.name}
              </li>
            ))}
            </ul>
          <List bottomList={bottomList}></List>
          
        </div>
      );
    } else {
      return null;
    }
  }
}
